<html>

	<head>
		<meta charset="UTF-8">
		<title>进度条</title>
		<style type="text/css">
			.processcontainer {
				width: 450px;
				border: 1px solid black;
				height: 25px;
				position: relative;
			}
			
			#processbar {
				background: green;
				float: left;
				height: 100%;
				text-align: center;
				line-height: 150%;
				position: absolute;
			}
		</style>
	</head>

	<body>
		<div class="processcontainer">
			<div id="processbar" style="width:10%;" align="center">10%</div>
		</div>
		<br />
		<input id="btn" type="button" value="点击" onclick="backchange()" />
		<script type="text/javascript">
			function backchange() {
				function setProcess() {
					var processbar = document.getElementById("processbar");
					processbar.style.width = parseInt(processbar.style.width) + 1 + "%";
					processbar.innerHTML = processbar.style.width;
					if(processbar.style.width == "100%") {
						window.clearInterval(bartimer);
					}
				}
				var bartimer = window.setInterval(function() {
					setProcess();
				}, 100);
				window.onload = function() {
					bartimer;

				}
			}
		</script>

	</body>

</html>